<template>
    <div class="orderdetail">
        <van-skeleton title :row="3" :loading="loading">
            <div class="" v-if="detail.length>0">
                <div class="top" >
                    <h3>{{ orderStatus.title }}</h3>
                    <p>订单金额(含运费): ￥{{ detail[0] && detail[0].subtotal }}</p>
                    <p v-if="orderStatus.status != 4">
                        <van-count-down :time="orderStatus.time" format="DD 天 HH 时 mm 分 ss 秒" />
                    </p>
                </div>
                <div class="cont" v-for="(item,index) in detail" :key="index">
                    <div class="address">
                        <van-cell :title="item.addressname" :value="item.mobile" :label="item.province+item.city+item.district+item.address" />
                    </div>
                    <div class="goodsList">
                        <van-card :price="item.price" :title="item.name" :thumb="item.url" :num="item.order_num">
                            <template #tags>
                                <van-tag plain type="danger" v-if="item.shipping_status == 5">退货中...</van-tag>
                                <van-tag plain type="danger" v-if="item.shipping_status == 7">已退货</van-tag>
                            </template>
                            <template #footer>
                                <div class="btn" @click.stop="">
                                    <van-button 
                                        @click="goReturn(item.order_code,index)" 
                                        v-if="item.shipping_status == 6" 
                                        color="linear-gradient(to right, #ff6034, #ee0a24)" 
                                        size="small"
                                    >
                                        退货
                                    </van-button>
                                </div>
                            </template>
                        </van-card>
                    </div>
                </div>
                <div class="detail">
                    <van-cell title="商品小计" :value="'￥'+detail[0].subtotal"/>
                    <van-cell title="运费" value="￥15.00"/>
                    <van-cell title="实付费(含运费)" :value="`￥${Number(detail[0].subtotal)+15}`"/>
                    <van-cell title="买家备注" :label="detail[0].remark || '无'"/>
                </div>
                <div class="bottom">
                    <van-cell title="订单编号：" :value="detail[0].order_code"/>
                    <van-cell title="创建时间：" :value="detail[0].create_at"/>
                    <van-cell title="支付时间：" :value="detail[0].create_at "/>
                </div>
                <div class="bar" v-if="detail[0].payment_status == 1">
                    <van-button @click="beforePay" type="danger" size="large">立即付款</van-button>
                </div>
                <div class="bar" v-else-if="detail[0].payment_status == 2 && detail[0].shipping_status == 2">
                    <van-button :to="'/center/orderlist/orderDetail/refund/' + $route.params.id" type="danger" size="large">申请退款</van-button>
                </div>  
                <div class="bar" v-else-if="detail[0].shipping_status == 6">
                    <van-button @click="confirm" type="danger" size="large">确认收货</van-button>
                </div>
            </div>
        </van-skeleton>
        
        <van-tabbar route active-color="#ee0a24">
            <van-tabbar-item to="/" icon="shop-o">首页</van-tabbar-item>
            <van-tabbar-item to="/goodstypelist" icon="apps-o">全部分类</van-tabbar-item>
            <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="/center" icon="manager-o">会员中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            loading:true,
            detail: [],
            logis: '',
        }
    },
    computed: {
        ...mapState(['openid', 'userState']),
        apiUrl() {
            return this.userState == 0 ? this.$api.merchantShow:this.$api.platformShow
        },
        orderStatus() {
            let status = ''
            let title = ''
            let desc = ''
            let time = ''
            this.detail.forEach(item => {
                if(item.payment_status == 1) {
                    status = 1
                    title = '买家未付款'
                    desc = '后不付款订单自动取消'
                    time = new Date(this.detail[0].payment_endtime).getTime() - new Date().getTime()
                    return
                }
                if(item.payment_status == 2) {
                    if(item.shipping_status == 2) {
                        status = 2
                        title = '等待卖家发货'
                        desc = '后商家不发货,会重新安排新的商家发货,请耐心等待'
                        time = new Date(this.detail[0].not_endtime).getTime() - new Date().getTime()
                        return
                    }
                    if(item.shipping_status == 4) {
                        status = 4
                        title = '订单已完成'
                        desc = ''
                        time = ''
                        return
                    }
                    if(item.shipping_status == 6) {
                        status = 6
                        title = '卖家已发货'
                        desc = '后自动确认收货'
                        time = new Date(this.detail[0].confirm_endtime).getTime() - new Date().getTime() 
                        return
                    }
                }
            })
            return { status, title, desc, time }
        }
    },
    mounted(){
        this._get()
    },
    methods:{
        //点击退货
        goReturn(order_code,index){
            this.$router.push({ path: `/center/orderDetailReturn/${order_code}/${index}` }) // -> /user/123
        },
        //确认收货
        confirm() {
            this.$dialog.confirm({
                title: '提示',
                message: '是否确认收货',
            })
            .then(() => {
                // on confirm
                this._confirm()
            })
            .catch(() => {
                // on cancel
            });
        },
        async _confirm(){
            let { data: { code, data } } = await this.$http.post(this.$api.merchantConfirm,{
                order_code: this.$route.params.id,
                openid: this.openid
            })
            if (code === 0) {
                this.$toast(data)
                setTimeout(() => {
                    this.$router.go(-1)
                }, 1500)
            }
        },
        //立即付款
        beforePay(){
            this.$router.push('/payment')
        },
        //获取订单内容
        async _get() {
            let { data: { code, data } } = await this.$http.get(this.apiUrl,{
                order_code: this.$route.params.id,
                openid: this.openid
            })
            this.loading=false
            if(code === 0) {
                this.detail = data
                if(this.detail[0].shipping_status != '2') {
                    this.getLogistics(this.detail[0].com, this.detail[0].num)
                }
            }
        },
        async getLogistics(com, num) {
            let { data: { code, data } } = await this.$http.get(this.$api.platformExpre,{
                com,
                num
            })
            if(code === 0) {
                if (Array.isArray(data)) {
                    let logisArr = data[0].data.map(item => {
                        item.day = item.time.substring(5, 10)
                        item.time = item.time.substring(11, 16)
                        return item
                    })
                    this.logis = {
                        com: data[0].com,
                        num: data[0].nu,
                        logisArr
                    }
                } else {
                    this.logis = data
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .orderdetail{
        padding-bottom: 50px;
        .van-skeleton__title{
            margin-top: 2rem;
        }
        .van-skeleton__row, .van-skeleton__title{
            background-color: #fff;
        }
        .top{
            text-align: center;
            margin-bottom: .2rem;
            padding: 2rem 0;
            background: orange;
            color: #fff;
        }
        .bottom{
            padding: 1rem 0;
        }
        .bar{
            padding-bottom: 2rem;
        }
    }
</style>